<template>
  <zk-topBg paddingTop="30" :showBack="true" title="归还单"></zk-topBg>
  <view id="addIMborrow">
    <scroll-view
      :style="{
        padding:
          imreturnOtherStore.addOrdetailOrEdit === 'detail' ? 0 : ' 0 0 54px',
      }"
      scroll-y>
      <!-- 基本信息 -->
      <view id="baseInfo" class="card">
        <view class="title">
          <zk-titleLeft>基本信息</zk-titleLeft>
        </view>
        <!-- 借调单信息  -->
        <view class="detail_box fs_14">
          <view class="msg_box">
            <view class="msg_item flex">
              <view class="label color_text_gray">借调单号</view>
              <view class="info flex code color_black">
                <view class="text_overflow">
                  {{ imreturnOtherStore.LoanCode }}
                </view>
                <image @tap="clickToCopy" src="@/static/img/other/copy-g.png" />
              </view>
            </view>
            <view class="msg_item flex">
              <view class="label color_text_gray">借调类型</view>
              <view class="info flex color_black">
                <view>
                  {{ imreturnOtherStore.borrowOderDetail.RegisterTypeName }}
                </view>
              </view>
            </view>
            <view class="msg_item flex">
              <view class="label color_text_gray">计划归还时间</view>
              <view class="info flex color_black">
                <view>{{
                  imreturnOtherStore.borrowOderDetail.ScheduleDate
                }}</view>
              </view>
            </view>
            <image
              v-if="
                imreturnOtherStore.borrowOderDetail.ReplyStatus == 'CheckFail'
              "
              class="approval_img"
              src="@/static/img/other/approval-nopassed.png" />
            <image
              v-if="
                imreturnOtherStore.borrowOderDetail.ReplyStatus == 'CheckNot'
              "
              class="approval_img"
              src="@/static/img/other/approval-pending.png" />
            <image
              v-if="
                imreturnOtherStore.borrowOderDetail.ReplyStatus == 'CheckPass'
              "
              class="approval_img"
              src="@/static/img/other/approval-passed.png" />
          </view>
          <view class="msg_box">
            <view class="msg_item flex">
              <view class="label color_text_gray">借调部门</view>
              <view class="info flex color_black">
                <view>{{
                  imreturnOtherStore.borrowOderDetail.BorrowerDept
                }}</view>
              </view>
            </view>
            <view class="msg_item flex">
              <view class="label color_text_gray">借调人</view>
              <view class="info flex color_black">
                <view>{{ imreturnOtherStore.borrowOderDetail.Borrower }}</view>
              </view>
            </view>
            <view class="msg_item flex">
              <view class="label color_text_gray">借调人联系电话</view>
              <view class="info flex color_black">
                <view>{{
                  imreturnOtherStore.borrowOderDetail.BorrowerTel
                }}</view>
              </view>
            </view>
          </view>
          <view class="msg_box">
            <view class="msg_item flex">
              <view class="label color_text_gray">借调时间</view>
              <view class="info flex color_black">
                <view>
                  {{ imreturnOtherStore.borrowOderDetail.RegisterDate }}
                </view>
              </view>
            </view>
            <view class="msg_item flex">
              <view class="label color_text_gray">借调原因</view>
              <view class="info flex color_black">
                <view>{{
                  imreturnOtherStore.borrowOderDetail.BorrowReason
                }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 归还信息  -->
      <view id="Approval_process" class="card">
        <view class="title">
          <zk-titleLeft>归还信息</zk-titleLeft>
        </view>
        <!-- 修改信息  -->
        <view
          v-if="imreturnOtherStore.addOrdetailOrEdit === 'edit'"
          class="form_box">
          <view class="form_item_box flex">
            <view class="form_item">
              <view class="label flex">
                <view>归还人</view>
                <view class="color_red">*</view>
              </view>
              <view class="input">
                <uni-easyinput
                  v-model="imreturnOtherStore.formData.Returnee"
                  placeholder="请输入内容"></uni-easyinput>
              </view>
            </view>
            <view class="form_item">
              <view class="label flex">
                <view>归还人联系方式</view>
                <view class="color_red">*</view>
              </view>
              <view class="input">
                <uni-easyinput
                  v-model="imreturnOtherStore.formData.ReturneeTel"
                  placeholder="请输入内容"></uni-easyinput>
              </view>
            </view>
            <view class="form_item">
              <view class="label flex">
                <view>归还时间</view>
                <view class="color_red">*</view>
              </view>
              <view class="input">
                <uni-datetime-picker
                  type="datetime"
                  v-model="imreturnOtherStore.formData.ReturnDate" />
              </view>
            </view>
          </view>
          <view class="form_item area_box">
            <view class="label flex">
              <view>归还说明</view>
              <view class="color_red">*</view>
            </view>
            <view class="input">
              <uni-easyinput
                type="textarea"
                v-model="imreturnOtherStore.formData.ReturnReason"
                placeholder="请输入内容"></uni-easyinput>
            </view>
          </view>
        </view>
        <!-- 详情信息  -->
        <view v-else class="approval_box fs_14">
          <view class="approval_item_box flex">
            <view class="approval_item flex">
              <view class="label color_text_gray">归还人</view>
              <view class="info color_black">
                {{ imreturnOtherStore.formData.Returnee || "--" }}
              </view>
            </view>
            <view class="approval_item flex">
              <view class="label color_text_gray">归还人联系方式</view>
              <view class="info color_black">
                {{ imreturnOtherStore.formData.ReturneeTel }}
              </view>
            </view>
            <view class="approval_item flex">
              <view class="label color_text_gray">归还时间</view>
              <view class="info color_black">
                {{ imreturnOtherStore.formData.ReturnDate }}
              </view>
            </view>
          </view>
          <view class="approval_item ReturnReason flex">
            <view class="label color_text_gray">归还说明</view>
            <view class="info color_black">
              {{ imreturnOtherStore.formData.ReturnReason }}
            </view>
          </view>
        </view>
      </view>
      <!-- 物资信息  -->
      <view id="material_info" class="card">
        <view class="title">
          <zk-titleLeft>物资信息</zk-titleLeft>
          <view class="handle_box flex">
            <view class="searchBox">
              <input
                v-model="searchGoodsInfoParam"
                @confirm="searchGoodsInfoList"
                placeholder="请输入物资名称或编号"
                placeholder-class="input-placeholder" />
              <view @tap="searchGoodsInfoList" class="iconBut">
                <image
                  src="@/static/img/statistics/seachH.png"
                  class="tabIcon" />
              </view>
            </view>
          </view>
        </view>
        <view class="table_box">
          <!-- 头部 -->
          <view class="table_header">
            <view
              :class="[
                imreturnOtherStore.addOrdetailOrEdit === 'detail'
                  ? 'detail'
                  : '',
              ]"
              class="table_header_item">
              <!-- 表头 -->
              <view
                class="fs_15 color_text_gray"
                v-for="(item, index) in imreturnOtherStore.addtableHeader"
                :key="index">
                {{ item }}
              </view>
            </view>
          </view>
          <!-- 表格 -->
          <scroll-view
            style="height: 220px"
            @scrolltolower="BorrowOrderGoodsListScroll"
            scroll-y>
            <view
              class="table_body"
              v-if="imreturnOtherStore.addGoodsInfoList.addGoodsList">
              <view
                v-for="(item, index) in imreturnOtherStore.addGoodsInfoList
                  .addGoodsList"
                :key="index"
                :class="[
                  imreturnOtherStore.addOrdetailOrEdit === 'detail'
                    ? 'detail'
                    : '',
                ]"
                class="table_body_item">
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.GoodsName }}
                  </view>
                </view>
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.Units }}
                  </view>
                </view>
                <!-- 批次 -->
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.GoodsBatch || "-" }}
                  </view>
                </view>
                <!-- 有效期 -->
                <view class="table_body_item_cell">
                  <view class="fs_14">
                    <view class="fs_14 text_overflow">
                      {{ item.ExpirationDate || "-" }}
                    </view>
                  </view>
                </view>
                <!-- 借调数量 -->
                <view class="table_body_item_cell">
                  <view class="fs_14">
                    <view class="fs_14 text_overflow">
                      {{ item.GoodsNumber || 0 }}
                    </view>
                  </view>
                </view>
                <!-- 已还数量 -->
                <view class="table_body_item_cell">
                  <view class="fs_14">
                    <view class="fs_14 text_overflow">
                      {{ item.ReturnNumber || 0 }}
                    </view>
                  </view>
                </view>
                <!-- 本次归还数量 -->
                <view
                  v-if="imreturnOtherStore.addOrdetailOrEdit !== 'detail'"
                  class="table_body_item_cell text_overflow">
                  <view
                    class="fs_14 text_overflow"
                    v-if="imreturnOtherStore.addOrdetailOrEdit === 'detail'">
                    {{ item.ReturnNo }}
                  </view>
                  <view v-else class="fs_14 text_overflow">
                    <uni-easyinput
                      type="number"
                      v-model="item.ReturnNo"
                      trim="all"
                      placeholder="请输入"
                      @input="changeReturnNumber($event, item)"
                      @confirm="changeReturnNumber($event, item)"
                      placeholder-style="color: #CCCCD3;font-size: 13px;">
                    </uni-easyinput>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </scroll-view>
  </view>

  <view
    v-if="
      imreturnOtherStore.addOrdetailOrEdit === 'add' ||
      imreturnOtherStore.addOrdetailOrEdit === 'edit'
    "
    class="bottom_box">
    <zk-btn
      @handleTap="addOrEditInfo"
      class="save_btn"
      color="#08121E"
      backgroundColor="#EEEEEE">
      返回
    </zk-btn>
    <zk-btn @handleTap="shubmitAllInfo" class="submit_btn"> 提交</zk-btn>
  </view>
  <zk-tips></zk-tips>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useIMreturnStore } from "@/stores/modules/IMreturn/IMreturn";
import { useIMreturnOtherStore } from "@/stores/modules/IMreturn/IMreturnOther";
const imreturnOtherStore = useIMreturnOtherStore();
const IMreturnstore = useIMreturnStore();
// 页面加载时触发
onLoad(async (options: any) => {
  imreturnOtherStore.getGoodsTypeList(); // 获取物资类型列表
  if (options?.LoanCode) {
    if (options.Edit) {
      imreturnOtherStore.addOrdetailOrEdit = "edit";
    } else {
      imreturnOtherStore.addOrdetailOrEdit = "detail";
    }
    imreturnOtherStore.LoanCode = options.LoanCode;
    try {
      await imreturnOtherStore.getReturnDetailData({
        LoanCode: options.LoanCode,
      }); // 获取归还单详情
    } catch (error) {
      console.log("getReturnDetailData error", error);
    }

    await imreturnOtherStore.getAddGoods({}); // 获取归还单物资列表
  } else {
    imreturnOtherStore.clearData();
  }
  console.log("addIMborrow onLoad", imreturnOtherStore.addOrdetailOrEdit);
});
//点击复制
const clickToCopy = () => {
  uni.setClipboardData({
    data: imreturnOtherStore.LoanCode,
    success: () => {
      uni.showToast({
        title: "复制成功",
        duration: 1000,
        icon: "none",
        mask: true,
      });
    },
  });
};
//归还数量比较
const changeReturnNumber = (event: any, item: any) => {
  let value = item.GoodsNumber - item.ReturnNumber;
  console.log("changeReturnNumber", event, value);
  if (event > value) {
    uni.showToast({
      title: "归还数量不能大于借调数量",
      duration: 1000,
      icon: "none",
      mask: true,
    });
    item.ReturnNo = value;
  } else {
    item.ReturnNo = event;
  }
};
// 返回
const addOrEditInfo = async () => {
  uni.navigateBack({
    delta: 1,
  });
};
// 提交归还单
const shubmitAllInfo = async () => {
  await imreturnOtherStore.submitReturnListOrder({});
};

//归还单物资列表搜索物资信息列表
const searchGoodsInfoParam = ref("");
const searchGoodsInfoList = async () => {
  await imreturnOtherStore.getAddGoods({
    searchParam: searchGoodsInfoParam.value,
  });
  pageNumBorrowOrder.value = 1;
};
//归还单物资列表滚动到底部
const pageNumBorrowOrder = ref(1);
const BorrowOrderGoodsListScroll = async () => {
  if (
    imreturnOtherStore.addGoodsInfoList.currPage <
    imreturnOtherStore.addGoodsInfoList.totalPage
  ) {
    pageNumBorrowOrder.value++;
    await imreturnOtherStore.getAddGoods({
      pageNum: pageNumBorrowOrder.value,
    });
  } else {
    uni.showToast({
      title: "没有更多数据了",
      duration: 1000,
      icon: "none",
      mask: true,
    });
  }
};
</script>

<style lang="scss" scoped>
#addIMborrow {
  position: relative;
  height: calc(552px - 64px);
  width: 98%;
  margin: auto;
  padding: 0 10px;
  z-index: 1;
  margin-top: 10px;
  padding: 10px;
  scroll-view {
    height: 100%;
    width: 100%;
  }
  .card {
    padding: 20px;
  }
  /********基本信息********/
  #baseInfo {
    position: relative;

    /********详情时msg */
    .detail_box {
      .msg_box {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .msg_item {
          width: 33.33%;
          .code {
            width: 75%;
          }
          .info {
            margin-left: 5px;
            image {
              width: 14px;
              height: 14px;
              margin-left: 5px;
            }
          }
        }
        .approval_img {
          width: 80px;
          height: 80px;
          position: absolute;
          top: 10px;
          right: 10px;
        }
      }
      .msg_item {
        margin: 10px 0;
      }
    }
  }
  /********审批流程*******/
  #Approval_process {
    margin: 18px 0;
    .form_box {
      margin: 10px 0;
      flex-wrap: wrap;
      justify-content: space-between;
      .form_item_box {
        justify-content: space-between;
        margin-bottom: 20px;
      }
      .form_item {
        width: 30%;
        &.area_box {
          width: 100%;
        }
        .label {
          color: rgb(8, 18, 30);
          font-family: 思源黑体;
          font-size: 16px;
          margin: 5px 0;
        }
      }
    }
    .approval_box {
      margin: 10px 0;
      .approval_item {
        width: 33.33%;
        &.ReturnReason {
          width: 100%;
        }
      }
    }
    .approval_item {
      margin: 10px 0 10px;
      .label {
        margin-right: 10px;
      }
    }
  }
  /******物资信息*******/
  #material_info {
    margin: 18px 0;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .handle_box {
        .searchBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 240px;
          height: 40px;
          margin: 4px 0 8px;
          border-radius: 8px;
          padding: 9px 0 9px 12px;
          border: 1px solid rgb(228, 228, 228);
          background-color: #ffffff;
          margin: 0 10px;
          input {
            font-size: 14px;
          }

          .iconBut {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 38px;
            height: 38px;
            border-left: 1px solid rgb(228, 228, 228);

            image {
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }
    .table_box {
      padding: 16px 0 0 0;
      width: 100%;
      .table_header_item,
      .table_body_item {
        text-align: center;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: 40px;
        align-items: center;
        padding: 10px;
      }
      .table_header_item {
        padding: 5px 10px !important;
        grid-template-rows: 30px;
      }
      .table_header_item.detail,
      .table_body_item.detail {
        grid-template-columns: repeat(6, 1fr);
      }
      .table_header_item {
        width: 100%;
        border-radius: 6px;
        background: #f2f3f4;
        .title {
          color: #adafb8;
          font-family: HarmonyOS Sans SC;
          font-size: 14px;
          text-align: center;
        }
      }
      .table_body {
        width: 100%;
        height: 100%;
        .table_body_item {
          border-bottom: 1px solid rgb(244, 244, 244);
        }
        .table_body_item_cell {
          ::v-deep .uni-easyinput {
            .uni-easyinput__content {
              width: 80%;
              border: 1px solid rgb(228, 228, 228);
              border-radius: 8px;
              font-size: 14px;
            }
          }
          .data_input {
            display: flex;
            width: 80%;
            border: 1px solid rgb(228, 228, 228);
            border-radius: 8px;
            padding: 10px 5px;
          }
          .handle_Box {
            width: 100%;
            justify-content: center;
            image {
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }
  }
}
/**************** 弹窗 ***********/
.popup_content {
  padding: 20px;
  border-radius: 16px;
  width: 620px;
  height: 424px;
  /* bg/纯白 */
  background: rgb(255, 255, 255);
  .popup_title {
    justify-content: space-between;
  }
  .searchBox {
    border: 1px solid rgb(228, 228, 228);
    border-radius: 10px;
    display: flex;
    align-items: center;
    margin: 10px 0 0 0;
    height: 40px;
    padding: 0 10px;
    input {
      width: 100%;
      height: 100%;
    }
  }
  .popup_content_box {
    height: calc(100% - 124px);
    .table_box {
      padding: 10px 0 0 0;
      width: 100%;
      height: 100%;
      scroll-view {
        height: calc(100% - 36px);
        .table_body {
          width: 100%;
          height: 100%;
          .table_body_item {
            border-bottom: 1px solid rgb(244, 244, 244);
          }
          .table_body_item_cell {
            text-align: center;
            .handle_Box {
              justify-content: center;
              width: 100%;
              view {
                margin: 0 5px;
              }
            }
          }
        }
      }
      .table_header_item,
      .table_body_item {
        display: grid;
        grid-template-columns: 48px repeat(5, 1fr);
        grid-template-rows: 40px;
        align-items: center;
        padding: 0 10px;
      }
      .table_header_item {
        width: 100%;
        border-radius: 6px;
        background: #f2f3f4;
        .title {
          color: #adafb8;
          font-family: HarmonyOS Sans SC;
          font-size: 14px;
          text-align: center;
        }
      }
    }
  }
  .popup_footer {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    ::v-deep .zk_btn {
      width: 200px;
      justify-content: center;
    }
  }
}
/********* 底部按钮 *********/
.bottom_box {
  height: 72px;
  width: 100%;
  box-shadow: 0px -4px 15px 0px rgba(0, 0, 0, 0.05);
  background: rgb(255, 255, 255);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  & > view {
    margin: 0 10px;
    justify-content: center;
  }
  .save_btn {
    width: 100px;
  }
  .submit_btn {
    width: 400px;
  }
}
</style>
